<template>
	<view class="box">
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" v-if="banner[cur].advert_pic">
			<swiper-item class="swiper-item" v-for="item in banner[cur].advert_pic" :key="item.id">
				<image :src="item.pic_url" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<scroll-view class="top" scroll-x>
			<text v-for="(item, index) in banner" :key="item.id" :class="index == cur ? 'cur' : ''" @click="setCur(index)">{{ item.name }}</text>
		</scroll-view>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="item.id">
				<text>{{ item.subtitle }} / {{ item.name }}</text>
				<text>{{ item.title }}</text>
				<view class="itemBody">
					<view class="ite" v-for="(ite, inde) in item.list" :key="ite.id" @click="router(index, inde)">
						<view class="img"><image :src="ite.cover_pic" mode="aspectFit"></image></view>
						<!-- <app-image borderRadius="16rpx 16rpx 0 0" width="346rpx" height="346rpx" :img-src="ite.cover_pic" mode="mode"></app-image> -->
						<view class="name">{{ ite.name }}</view>
					</view>
				</view>
				<view class="more" @click="navTo(index)">查看更多</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cur: -1,
			banner: [],
			list: []
		};
	},
	methods: {
		setCur(index) {
			this.cur = index;
		},
		router(index, inde) {
			const data = this.list[index].list[inde];
			uni.navigateTo({
				url: data.page_url
			});
		},
		navTo(index) {
			console.log();
			uni.setStorageSync('listItem', JSON.stringify(this.list[index]));
			uni.navigateTo({
				url: '/pages/cats/cats?&cat_id=' + this.list[index].cat_id
			});
		},
		getProduct(id) {
			this.$request({ url: this.$api.default.cat_list }).then(res => {
				if (res.code == 0) {
					this.banner = res.data.list;
					
					if (id) return (this.cur = id);
					this.cur = 0;
				}
			});
		}
	},
	created() {
		let id = uni.getStorageSync('id');
		if (id) return this.getProduct(id), uni.removeStorageSync('id');

		this.getProduct();
	},
	watch: {
		async cur(value) {
			this.list = [];
			let arr = this.banner[this.cur].child;
			for (let i = 0; i < arr.length; i++) {
				//console.log(arr[i].id);
				let res = await this.$request({ url: this.$api.default.goods_list + `&cat_id=${arr[i].id}&limit=8` });
				if (res.code == 0) {
					this.list.push({
						title: this.banner[value].child[i].name,
						name: this.banner[value].name,
						subtitle: this.banner[value].subtitle,
						cat_id: arr[i].id,
						list: res.data.list
					});
				}
			}
			console.log(this.list);
		}
	}
};
</script>

<style lang="scss">
	
.more {
	text-align: center;
	font-size: 0.8em;
	margin-top: 20upx;
	margin-bottom: 80upx;
}
.cur {
	color: #000 !important;
	border-bottom: 1px solid !important;
}
.box {
	background-color: #fff;
	.swiper{
		width: 100%;
		height: 500upx;
		.swiper-item{
			width: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.top {
		white-space: nowrap;
		width: 750rpx;
		height: 99rpx;
		padding: 0 5rpx;
		flex-wrap: nowrap;
		box-sizing: border-box;
		text {
			display: inline-block;
			height: 97rpx;
			color: #999;
			padding-bottom: 10upx;
			line-height: 97rpx;
			font-size: 26rpx;
			margin: 0 19rpx;
			white-space: nowrap;
			border-bottom: 1rpx solid transparent;
		}
	}
	.list {
		padding: 24rpx 24rpx 0 24rpx;
		.item {
			margin: 30upx 0;
			text {
				display: block;
				font-size: 0.8em;
				line-height: 1.5em;
				text-align: center;
			}
			text:nth-child(1) {
				color: #737373;
				font-family: '黑体';
				letter-spacing: 2px;
				font-size: 14px;
			}
			text:nth-child(2) {
				color: #1a1915;
				font-family: '黑体';
				letter-spacing: 2px;
				font-weight: bold;
			}
			.itemBody {
				display: flex;
				margin-top: 20upx;
				justify-content: space-between;

				flex-wrap: wrap;
				.ite {
					border-radius: 16upx;
					overflow: hidden;
					margin: 20upx 0;
					width: 49%;
					background-color: #fff;
					box-shadow: #eee 0 0 6px 4px;
					.img {
						width: 100%;
						position: relative;
						background-color: #f6f6f6;
						padding-bottom: 100%;
						image {
							top: 50%;
							transform: translateY(-50%);
							position: absolute;
							width: 100%;
							max-width: 100%;
							height: 100%;
							height: 100%;
						}
					}
					.name {
						padding: 20upx 20upx;
						color: #000;
						font-size: 0.8em;
					}
				}
			}
		}
	}
}
</style>
